<!--
 * @Author: zhangfeng
 * @Date: 2024-01-12 10:39:58
 * @LastEditTime: 2024-01-19 18:14:41
 * @LastEditors: zhangfeng
 * @Description: 
 * @FilePath: \manager\managersystem\src\components\Editor\Editor.vue
 * © 2023 张峰，All rights reserved.
-->
<template>
	<div style="border: 1px solid #ccc">
		<Toolbar
			style="border-bottom: 1px solid #ccc"
			:editor="editorRef"
			:defaultConfig="toolbarConfig"
			:mode="mode"
		/>
		<Editor
			style="height: 500px; overflow-y: hidden"
			v-model="valueHtml"
			:defaultConfig="editorConfig"
			:mode="mode"
			@onCreated="handleCreated"
		/>
	</div>
</template>

<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css';
import { IEditorConfig } from '@wangeditor/editor';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { user } from '../../store/index';

const storeUser = user();
const editorRef = shallowRef();
const mode = 'default';
const props = defineProps({
	modelValue: {
		type: String,
		required: true,
		default: () => {},
	},
	actionsImage: {
		type: String,
		default: () => {},
	},
	actionsVideo: {
		type: String,
		default: () => {},
	},
});

const valueHtml = ref(props.modelValue);

// emit 事件
const emit = defineEmits(['update:modelValue']);
// valueHtml 值发生变化时 触发emit事件 并将值赋值给vmodle
watch(valueHtml, (val) => {
	emit('update:modelValue', val);
});

const toolbarConfig = {};
type InsertFnType = (url: string, alt: string, href: string) => void;
type InsertFnTypeVideo = (url: string, poster: string) => void;
const editorConfig: Partial<IEditorConfig> = {
	placeholder: '请输入内容...',
	MENU_CONF: {
		uploadImage: {
			server: props.actionsImage,
			fieldName: 'file',
			maxFileSize: 10 * 1024 * 1024, // 10M
			base64LimitSize: 1 * 1024 * 1024,
			headers: {
				token: storeUser.token,
			},
			timeout: 5 * 1000,
			// 上传之前触发
			onBeforeUpload(file: File) {
				// TS 语法
				// onBeforeUpload(file) {    // JS 语法
				// file 选中的文件，格式如 { key: file }
				return file;

				// 可以 return
				// 1. return file 或者 new 一个 file ，接下来将上传
				// 2. return false ，不上传这个 file
			},

			// 上传进度的回调函数
			onProgress(progress: number) {
				// TS 语法
				// onProgress(progress) {       // JS 语法
				// progress 是 0-100 的数字
				console.log('progress', progress);
			},

			// 单个文件上传成功之后
			onSuccess(file: File, res: any) {
				// TS 语法
				// onSuccess(file, res) {          // JS 语法
				console.log(`${file.name} 上传成功`, res);
			},

			// 单个文件上传失败
			onFailed(file: File, res: any) {
				// TS 语法
				// onFailed(file, res) {           // JS 语法
				console.log(`${file.name} 上传失败`, res);
			},

			// 上传错误，或者触发 timeout 超时
			onError(file: File, err: any, res: any) {
				// TS 语法
				// onError(file, err, res) {               // JS 语法
				console.log(`${file.name} 上传出错`, err, res);
			},
			customInsert(res: any, insertFn: InsertFnType) {
				// TS 语法
				// customInsert(res, insertFn) {                  // JS 语法
				// res 即服务端的返回结果
				const url =
					import.meta.env.VITE_API_PREFIX + res.result[Object.keys(res.result)[0]];
				const alt = res.alt || '';
				const href = res.href || '';
				// 从 res 中找到 url alt href ，然后插入图片
				insertFn(url, alt, href);
			},
		},
		uploadVideo: {
			server: props.actionsVideo,
			fieldName: 'file',
			maxFileSize: 20 * 1024 * 1024, // 20M
			headers: {
				token: storeUser.token,
			},
			// 上传之前触发
			onBeforeUpload(file: File) {
				// TS 语法
				// onBeforeUpload(file) {      // JS 语法
				// file 选中的文件，格式如 { key: file }
				return file;

				// 可以 return
				// 1. return file 或者 new 一个 file ，接下来将上传
				// 2. return false ，不上传这个 file
			},

			// 上传进度的回调函数
			onProgress(progress: number) {
				// TS 语法
				// onProgress(progress) {       // JS 语法
				// progress 是 0-100 的数字
				console.log('progress', progress);
			},

			// 单个文件上传成功之后
			onSuccess(file: File, res: any) {
				// TS 语法
				// onSuccess(file, res) {          // JS 语法
				console.log(`${file.name} 上传成功`, res);
			},

			// 单个文件上传失败
			onFailed(file: File, res: any) {
				// TS 语法
				// onFailed(file, res) {          // JS 语法
				console.log(`${file.name} 上传失败`, res);
			},

			// 上传错误，或者触发 timeout 超时
			onError(file: File, err: any, res: any) {
				// TS 语法
				// onError(file, err, res) {               // JS 语法
				console.log(`${file.name} 上传出错`, err, res);
			},
			customInsert(res: any, insertFn: InsertFnTypeVideo) {
				// TS 语法
				// customInsert(res, insertFn) {                  // JS 语法
				// res 即服务端的返回结果
				console.log(res);
				const url =
					import.meta.env.VITE_API_PREFIX + res.result[Object.keys(res.result)[0]];

				const poster =
					import.meta.env.VITE_API_PREFIX + res.result[Object.keys(res.result)[1]];

				// 从 res 中找到 url poster ，然后插入视频
				insertFn(url, poster);
			},
		},
	},
};

// // 修改 uploadImage 菜单配置
// editorConfig.MENU_CONF?['uploadImage'] = {
//     server: '/api/upload-image',
//     fieldName: 'custom-field-name'
//     // 继续写其他配置...

//     //【注意】不需要修改的不用写，wangEditor 会去 merge 当前其他配置
// }

onBeforeUnmount(() => {
	const editor = editorRef.value;
	if (editor == null) return;
	editor.destroy();
});
const handleCreated = (editor: any) => {
	editorRef.value = editor; // 记录 editor 实例，重要！
};
</script>

<style scoped></style>
